<template>
  <div class="vip-tips">
    <div @click="vipClick">
      <span class="tips-txt">
        <span class="emoji">💎</span>
        试用体验 • {{ vipTips }}
      </span>
    </div>
    <vip-dialog :visible.sync="vipDialogVisible"></vip-dialog>
  </div>
</template>
<script>
import VipDialog from './VipDialog.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'VipDay',
  components: { VipDialog },
  props: {},
  data() {
    return {
      vipDialogVisible: false,
    }
  },
  computed: {
    ...mapGetters(['leftNavMenus']),
    ...mapGetters('role', ['isOperateRole', 'isAdminRole', 'isMainRole', 'isOrgRole']),
    vipDays() {
      return this.$store.getters.vipDays
    },
    vipTips() {
      let tips = ''
      if (this.vipDays > 7) {
        tips = `剩余${this.vipDays}天`
      } else if (this.vipDays > 0) {
        tips = '即将到期'
      } else {
        tips = '已到期'
      }
      return tips
    },
  },
  methods: {
    vipClick() {
      if (this.isAdminRole) {
        this.vipDialogVisible = true
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.vip-tips {
  display: inline-block;
  align-items: center;
  height: 36px;
  padding: 0 20px;
  cursor: pointer;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
  background-image: linear-gradient(90deg, rgb(239, 87, 45) -1%, rgb(228, 108, 107) 99%);
  .emoji,
  .tips-txt {
    line-height: 36px;
  }
  .tips-txt {
    color: #fff;
  }
}
</style>
